import React from "react";
import classNames from "classnames";
import './style.less';

export interface DividerOptions {
    className?: string; // 分割线样式类
    dashed?: boolean; // 是否虚线
    orientation?: 'left' | 'right' | 'center'; // 分割线标题的位置
    plain?: boolean; // 文字是否显示为普通正文样式
    style?: React.CSSProperties; // 分割线样式对象
    type?: 'horizontal' | 'vertical'; // 水平还是垂直类型
    children?: React.ReactNode;
}

export default class Divider extends React.Component<DividerOptions, any> {
    static defaultProps = {
        dashed: false,
        orientation: 'center',
        plain: false,
        type: 'horizontal'
    }

    constructor(props: DividerOptions) {
        super(props);
        this.state = {}
    }

    render() {
        const {
            className, orientation, style, type, children
        } = this.props
        const classes = classNames({
            'r-divider': true,
            [`r-divider-${type}`]: type,
            'r-divider-with-text': children,
            [`r-divider-with-text-${orientation}`]: children,
            className,
        })
        return (
            <div className={classes} style={style}>
                {children &&
                    <span className="r-divider-inner-text">{children}</span>
                }
            </div>
        )
    }
}